<template>
  <div id="container">
    <!-- 头部 -->
    <div class="header">
      <headerTou></headerTou>
      <div class="tabs">
        <div @click="fanhui"><i class="el-icon-caret-left"></i>返回</div>
        <img :src="user.dataVLogo ? user.dataVLogo : ''" class="logo" />
      </div>

      <div class="header_right">
        <el-tooltip
          class="item"
          effect="dark"
          :content="fullScreenContent"
          placement="bottom"
        >
          <i :class="quanping1" @click="onFullScreen"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="后台系统"
          placement="bottom"
        >
             <i class="iconfont houtai-xitongguanli tableBtnIcon" @click="onHoutai"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="退出"
          placement="bottom"
        >
            <i class="iconfont tuichu1 tableBtnIcon" @click="exit"></i>
        </el-tooltip>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="right">
      <div class="right_alarm">
        <div class="right_bottom2">
          <monitoring
            ref="refmonitoring"
            v-if="!datav.orgInfo.orgId"
          ></monitoring>
          <monitoring1 ref="refmonitoring1" v-else></monitoring1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTou from "./components/headerTou.vue"; //头部组件
import monitoring from "./components/monitoring.vue"; //
import monitoring1 from "./components/monitoring1.vue"; //
import { reqLogout } from "@api/apiDatav.js";
import { mapState, mapMutations } from "vuex";
import screenfull from "screenfull"; //全屏
import { onDestory } from "@utils/map/map";

export default {
  name: "",
  components: {
    headerTou,
    monitoring,
    monitoring1,
  },
  data() {
    return {
      fullScreenContent: "全屏",
      quanping1: 'iconfont pc-quanping tableBtnIcon',
      xitong: require("@assets/images/datav/xitong.png"),
      tuichu: require("@assets/images/datav/tuichu.png"),
      logo: require("@assets/images/logo4.png"),
    };
  },
  computed: {
    ...mapState(["user", "datav", "config"]),
  },
  watch: {},
  beforeDestroy() {},
  async mounted() {},
  async activated() {
    if (this.datav.orgInfo.orgId) {
      this.$refs.refmonitoring1.init(); //初始化
      this.$refs.refmonitoring1.gettoken(); //萤石云初始化
      await this.$refs.refmonitoring1.ProductList(); // 获取产品列表
      // await this.$refs.refmonitoring1.getDataList(); // 获取设备列表
    } else {
      this.$refs.refmonitoring.init(); //初始化
      // this.$refs.refmonitoring.getOrgList()  // 获取单位列表
      this.$refs.refmonitoring.gettoken(); //萤石云初始化
      await this.$refs.refmonitoring.ProductList(); // 获取产品列表
      await this.$refs.refmonitoring.getDataList(); // 获取设备列表
    }
  },
  async created() {},
  methods: {
    ...mapMutations([
      "saveorgarr",
      "saveIsWhiteTheme",
      "saveflagDatav",
      "savebuildingsArr",
      "savefloorId",
      "savefloorFlag",
      "savespacesArr",
      "savespacesFlag",
    ]),
    // 回到租户
    fanhui() {
      this.$router.go(-1);
      if (this.datav.orgInfo.orgId) {
        this.$refs.refmonitoring1.closeAddDialog(); //关闭
      } else {
        this.$refs.refmonitoring.closeAddDialog(); //关闭
      }
    },

    //后台系统
    onHoutai() {
      this.saveIsWhiteTheme(false);
      // this.$router.replace("/org/list")
      if (this.user.roleName == "INSTERALL_USER" || this.user.roleName == "UNIT_ADMIN") {
        this.$router.replace("/org/list");
      } else {
        this.$router.replace("/enterprise/org");
      }
      onDestory(); // 销毁地图
    },
    // 全屏
    onFullScreen() {
      // if (!screenfull.isEnabled) {
      //   this.$modal.notifyWarning("你的浏览器不支持全屏");
      //   return false;
      // }
      if (screenfull.element == null) {
        this.fullScreenContent = "退出全屏";
        this.quanping1 = 'iconfont compress tableBtnIcon';
      } else {
        this.fullScreenContent = "全屏";
        this.quanping1 = 'iconfont pc-quanping tableBtnIcon';
      }
      screenfull.toggle();
    },
    methods: {
        ...mapMutations(["saveorgarr", "saveIsWhiteTheme", "saveflagDatav", "savebuildingsArr", "savefloorId", "savefloorFlag", "savespacesArr", "savespacesFlag"]),
        // 回到租户
        fanhui() {
            this.$router.go(-1)
            this.$refs.refmonitoring.closeAddDialog()//关闭
        },

        //后台系统
        onHoutai() {
            this.saveIsWhiteTheme(false);
            // this.$router.replace("/org/list")
            if (this.user.roleName == "INSTERALL_USER" || this.user.roleName == "UNIT_ADMIN") {
                this.$router.replace("/org/list");
            } else {
                this.$router.replace("/enterprise/org");
            }
            onDestory()// 销毁地图
        },
        // 全屏
        onFullScreen() {
            // if (!screenfull.isEnabled) {
            //   this.$modal.notifyWarning("你的浏览器不支持全屏");
            //   return false;
            // }
           if (screenfull.element == null) {
              this.fullScreenContent = "退出全屏";
              this.quanping1 = 'iconfont compress tableBtnIcon';
            } else {
              this.fullScreenContent = "全屏";
              this.quanping1 = 'iconfont pc-quanping tableBtnIcon';
            }
            screenfull.toggle();
        },
        // 退出
        exit() {
            this.$confirm("确定要退出账号吗?", "温馨提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const res = await reqLogout({ id: this.user.userId });
                    sessionStorage.clear();
                    this.$router.push("/login");
                    window.location.reload(); //页面重新加载一次即可清空vuex
                    onDestory()// 销毁地图
                })
                .catch(() => { });
        },
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./videoSurveillance.less");
</style>